<template>
  <div>
    <div class="line"> </div>
    <div class="creatVideo">
      <div class="label">
        <svg @click="backPage" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="tabler-icon tabler-icon-arrow-left">
          <path d="M5 12l14 0"></path>
          <path d="M5 12l6 6"></path>
          <path d="M5 12l6 -6"></path>
        </svg>
        <span>{{ $t('creatVideo.creatVideo1') }}</span>
        <el-tooltip class="item" effect="dark" content="How to Post Images and Videos" placement="top">
          <svg style="color: #c1c2c5;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="tabler-icon tabler-icon-help-circle">
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
            <path d="M12 16v.01"></path>
            <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"></path>
          </svg>
        </el-tooltip>

      </div>
      <div class="desc">
        {{ $t('creatVideo.creatVideo2') }}<span>{{ $t('creatVideo.creatVideo3') }}</span> {{ $t('creatVideo.creatVideo4')
        }}<span>{{ $t('creatVideo.creatVideo5') }}</span>.
      </div>


      <div class="uploadImgBox">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="tabler-icon tabler-icon-photo">
          <path d="M15 8h.01"></path>
          <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path>
          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path>
          <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path>
        </svg>
        <div class="text">
          <div class="titles">{{ $t('creatVideo.creatVideo6') }}</div>
          <div>{{ $t('creatVideo.creatVideo7') }}</div>
          <div>{{ $t('creatVideo.creatVideo8') }}</div>
          <div>{{ $t('creatVideo.creatVideo9') }}</div>
          <div>{{ $t('creatVideo.creatVideo10') }}</div>
        </div>
      </div>

      <div class="desc" style="color: #c7c7c7;">
        {{ $t('creatVideo.creatVideo11') }}<span>{{ $t('creatVideo.creatVideo12') }}</span> {{
          $t('creatVideo.creatVideo13') }}<span>{{ $t('creatVideo.creatVideo14') }}</span> {{ $t('creatVideo.creatVideo15')
  }}
      </div>

      <div class="shengcheng">
        <div class="labels">
          {{ $t('creatVideo.creatVideo16') }} <span>*</span>
          <el-tooltip class="item" effect="dark"
            content="Models are the resources you're generating with. Using a different base model can drastically alter the style and composition of images, while adding additional resource can change the characters, concepts and objects"
            placement="top">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-info-circle">
              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
              <path d="M12 9h.01"></path>
              <path d="M11 12h1v4h1"></path>
            </svg>

          </el-tooltip>
        </div>
        <div class="boxs">
          <div class="title">
            梦想塑造者
          </div>
          <div class="num">8</div>
          <div class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-replace">
              <path d="M3 3m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
              <path d="M15 15m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
              <path d="M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3"></path>
              <path d="M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3"></path>
            </svg>
            <span>{{ $t('creatVideo.creatVideo17') }}</span>
          </div>
        </div>
      </div>
      <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div @click="showMore = !showMore" style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo18') }}
            </div>
            <div class=" icons">
              <svg :class="showMore ? 'xuanzhuanIcon' : ''" viewBox="0 0 15 15" fill="none"
                xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                <path
                  d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                  fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>
          
          <div class="moreAdd" v-if="showMore">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-plus">
              <path d="M12 5l0 14"></path>
              <path d="M5 12l14 0"></path>
            </svg>
            <span>{{ $t('creatVideo.creatVideo19') }}</span>
          </div>
        </div>
      </div>

      <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo20') }} <span style="color: red;">*</span>
              <el-tooltip class="item" popper-class="popper-class" effect="dark"
                content="Type out what you'd like to generate in the positive field, add aspects you'd like to avoid in the negative prompt"
                placement="top">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-info-circle">
                  <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                  <path d="M12 9h.01"></path>
                  <path d="M11 12h1v4h1"></path>
                </svg>

              </el-tooltip>
            </div>
            <div class="input">
              <textarea type="text" v-model="form.name1" />
            </div>
          </div>
        </div>
      </div>

      <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo21') }}
            </div>
            <div class="input">
              <textarea type="text" v-model="form.name2" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 120px;"></div>
  </div>
</template>

<script>
export default {
  name: "creatVideo",
  data() {
    return {
      showMore: false,
      form: {
        name1: 'mugshot,close up, prisoner beaver holding mugshot sign with bold text "BOBR KURWA", leather gloves,cinematic light, perfect composition, reflections on surface, 4k leather texture, mugshot white background',
        name2:'lowres, bad anatomy, bad hands, missing fingers, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, text, watermark',
      }
    };
  },
  mounted() {

  },
  methods: {
    backPage(){
      this.$router.go(-1);
    }
  },
};  
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 1px;
  background-color: #2c2e33;
}

.popper-class {
  width: 120px;
}

.creatVideo {
  width: 509px;
  margin: 0 auto;
  margin-top: 20px;

  .label{
    svg{
      cursor: pointer;
    }
  }

  .desc {
    margin-top: 16px;
    color: rgb(144, 146, 150);
    font-size: 11px;
    line-height: 1.55;
    text-decoration: none;
    cursor: pointer;

    span {
      color: rgb(77, 171, 247);
    }

    span:hover {
      text-decoration: underline;
    }
  }

  .uploadImgBox {
    width: 100%;
    height: 193px;
    margin-top: 15px;
    box-sizing: border-box;
    background-color: rgb(37, 38, 43);
    border: 2px dashed rgb(55, 58, 64);
    padding: 16px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease 0s;
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #C1C2C5;

    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    div {
      color: rgb(144, 146, 150);
      line-height: 18px;
    }

    .titles {
      color: inherit;
      font-size: 20px;
      line-height: 1;
      text-decoration: none;
      margin-bottom: 12px;
      color: #C1C2C5;
      margin-top: 5px;
    }
  }

  .uploadImgBox:hover {
    background-color: rgb(44, 46, 51);
  }

  .label {
    display: flex;
    align-items: center;

    span {
      font-weight: 700;
      font-size: 32px;
      line-height: 1.3;
      margin: 0 10px;
      color: #c1c2c5;

    }
  }
}

.shengcheng {
  margin-top: 20px;

  .labels {
    color: #c1c2c5;
    font-size: 13px;

    span {
      color: red;
    }
  }

  .boxs {
    text-decoration: none;
    color: rgb(193, 194, 197);
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid rgb(55, 58, 64);
    position: relative;
    overflow: hidden;
    background-color: rgb(37, 38, 43);
    padding: 8px 12px;
    margin-top: 15px;
    position: relative;

    .title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 6px;
    }

    .input {
      textarea {
        background: transparent;
        width: 100%;
        resize: none;
        border: none;
        padding: 10px 0px;
        outline: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        font-size: 14px;
        line-height: 1.55;
        overflow: hidden;
        color: rgb(193, 194, 197);
        height: 128px;
        box-sizing: border-box;
        border-radius: 5px;
        padding: 10px;
        border: 0.02667rem solid #373a40;
      }
    }

    .btn {
      padding: 0px 8px;
      appearance: none;
      text-align: left;
      text-decoration: none;
      box-sizing: border-box;
      height: 26px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      width: auto;
      border-radius: 32px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;
      background-color: rgba(25, 113, 194, 0.2);
      color: rgb(165, 216, 255);
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .icons {
      padding: 0px 8px;
      appearance: none;
      text-align: left;
      text-decoration: none;
      box-sizing: border-box;
      height: 26px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      width: auto;
      border-radius: 32px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .xuanzhuanIcon {
      transform: rotate(180deg)
    }

    .moreAdd {
      widows: 100%;
      height: 36px;
      border-radius: 4px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;
      background-color: rgba(25, 113, 194, 0.2);
      color: rgb(165, 216, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 8px;
      border-top: 1px solid #373a40;
    }
  }
}

@media screen and (max-width:768px) {
  .creatVideo{
    width: 93%;
    margin: 20px auto;
  }
}
</style>
